import { PageHeader, Tabs, Button, Statistic, Descriptions, Card, Row, Col, Table, message } from 'antd';
import React, { Component } from 'react';
import { Orderdetail, Deliveryconfirm, Invoiceadd, Ordersend } from '../../../services/auth';
import { getToken } from '../../../utils/auth';

const { TabPane } = Tabs;

const Content = ({ children, extra }) => (
	<div className="content">
		<div className="main">{children}</div>
		<div className="extra">{extra}</div>
	</div>
);

export default class OrderDetail extends Component {
	constructor(props) {
		super(props);
		this.handleCreateClick = this.props.handleCreateClick;
		this.state = { dataSource: [], status: this.props.value.status };
	}

	// 用于确认发货的函数
	deliveryConfirm = (id, operator_id) => {
		Deliveryconfirm(id, operator_id).then(
			(response) => {
				if (response.data.result === 'success') {
					message.success('发货单' + response.data.delivery_id + '已创建成功');
					this.handleCreateClick();
					this.setState({ status: '待收货' });
				} else {
					message.info('提交失败，请重试');
				}
			},
			(error) => {
				console.log('数据获取失败', error);
			}
		);
	};
	// 用于确认发送的函数
	sendConfirm = (id) => {
		Ordersend(id).then(
			(response) => {
				if (response.data === 'success') {
					message.success('订单已成功发送');
				} else {
					message.info('提交失败，请重试');
				}
			},
			(error) => {
				console.log('数据获取失败', error);
			}
		);
		Invoiceadd(id).then(
			(response) => {
				if (response.data.result === 'success') {
					message.success('发票预览' + response.data.invoice_id + '已创建成功');
					this.handleCreateClick();
					this.setState({ status: '待发货' });
				} else {
					message.info('提交失败，请重试');
				}
			},
			(error) => {
				console.log('数据获取失败', error);
			}
		);
	};
	judgeStatus = (status, value) => {
		switch (status) {
			case '待发送':
				return (
					<Button
						type="primary"
						onClick={() => {
							this.sendConfirm(value.id);
						}}
					>
						确认发送
					</Button>
				);
			case '待发货':
				return (
					<Button
						type="primary"
						onClick={() => {
							this.deliveryConfirm(value.id, this.user.id);
						}}
					>
						确认发货
					</Button>
				);
			default:
				return <div />;
		}
	};

	componentDidMount() {
		const { value } = this.props;
		Orderdetail(value.id).then(
			(response) => {
				response.data.goods.push({
					goods_id: '总计',
					discount: response.data.discount,
					current_price: response.data.total_price
				});
				this.setState({
					dataSource: response.data.goods
				});
			},
			(error) => {
				console.log('失败了', error);
			}
		);
	}
	render() {
		const { value } = this.props;
		const columns = [
			{
				title: '商品编号',
				dataIndex: 'goods_id',
				align: 'center'
			},
			{
				title: '商品名称',
				dataIndex: 'goods_name',
				align: 'center'
			},
			{
				title: '订购数量',
				dataIndex: 'quantity',
				align: 'center'
			},
			{
				title: '定价',
				dataIndex: 'price',
				align: 'center'
			},
			{
				title: '折扣',
				dataIndex: 'discount',
				width: '15%',
				editable: true,
				align: 'center'
			},
			{
				title: '产品价格',
				dataIndex: 'current_price',
				align: 'center'
			}
		];
		this.user = JSON.parse(getToken());

		return (
			<PageHeader
				className="site-page-header-responsive"
				title={`编号：${value.id}`}
				footer={
					<Tabs defaultActiveKey="1">
						<TabPane tab="详情展示" key="1">
							<Card bordered={false}>
								<Table
									dataSource={this.state.dataSource}
									columns={columns}
									size="small"
									pagination={false}
									rowKey={(record) => record.goods_id}
								/>
							</Card>
						</TabPane>
					</Tabs>
				}
				extra={// 该按钮应该需要判断未发货状态才可以展示
				this.judgeStatus(this.state.status, value)}
			>
				<Content
					extra={
						<div>
							<br />
							<Card bordered={false} bodyStyle={{paddingLeft:"0px"}}>
								<Row gutter={16}>
									<Col span={3}>
										<Statistic title="状态" value={this.state.status} />
									</Col>
									<Col span={5}>
										<Statistic title="总价" prefix="¥" value={value.total_price} valueStyle={{ color: '#cf1322' }}/>
									</Col>
								</Row>
							</Card>
						</div>
					}
				>
					<Descriptions size="default" column={2} bordered>
						{/* 判断若quotation_id为空，则证明直接创建订单，以下内容为无 */}
						<Descriptions.Item label="参照报价单" contentStyle={{fontWeight:"bold"}}>{value.quotation_id}</Descriptions.Item>
						<Descriptions.Item label="公司" contentStyle={{fontWeight:"bold"}}>{value.company_id + ' ' + value.company_name}</Descriptions.Item>
						{/* 这里应该需要操作员名称，而不是编号 */}
						<Descriptions.Item label="操作员" contentStyle={{fontWeight:"bold"}}>{value.operator_name}</Descriptions.Item>
						<Descriptions.Item label="预计送达日期" contentStyle={{fontWeight:"bold"}}>{value.req_deliv_date}</Descriptions.Item>
						<Descriptions.Item label="订单折扣" contentStyle={{fontWeight:"bold"}}>{value.discount}%</Descriptions.Item>
						<Descriptions.Item label="送货地点" contentStyle={{fontWeight:"bold"}}>{value.ship_to_address}</Descriptions.Item>
					</Descriptions>
				</Content>
			</PageHeader>
		);
	}
}
